var loginBox = $('.right li:first-of-type')
var orderList = JSON.parse(localStorage.getItem('order'));
// 判断登录状态,bool为true表示已登录，否则为未登录
function update() {
    let isLogin = localStorage.getItem('isLogin');
    let bool = isLogin == 'true';
    if (bool) {
        let name = localStorage.getItem('name');
        let img = localStorage.getItem('img');
        // 更新导航栏登录状态
        let str1 = `
            <a href="">${name}</a>
            <i class="PLUS" style="margin-right:10px;"></i>
            <i class="iconfont icon-xiajiantou"></i>
            <div class="dropdown-layer">
                <section class="myjdlist">
                        <img src="${img}">
                        <span>退出</span>
                </section> 
            </div>`
        loginBox.addClass('dropdown');
        loginBox.html(str1);
        // 更新购物车商品总数
        $('.goods_num').text(2);
        // 更新更多服务下的登录状态
        let str3 = ` <div class="user-message">
                            <img src="${img}" alt="" class="">
                            <!-- 登录注册 -->
                            <div class="log-in-register">
                                <p>Hi,${name}</p>
                                <p>
                                    <span class="icon-1"></span>
                                    <span class="icon-2"></span>
                                    <span class="quit"><span>退出</span></span>
                                </p>
                            </div>
                        </div>
                        <div class="btn">
                            <button class="saving">开通PLUS会员平均省1210元/年</button>
                    </div>`
        $('.user').html(str3);
    } else {
        let str2 = `
    <a href="./jd-login.html" class="login">你好，请登录</a>
    <a href="">免费注册</a>`;
        loginBox.removeClass('dropdown');
        loginBox.html(str2);
        $('.goods_num').text(0);
        let str4 = `<div class="user-message">
                        <img src="" alt="" class="">
                        <div class="log-in-register">
                            <p>Hi,欢迎逛京东!</p>
                            <p>
                                <span><a href="./jd-login.html">登录</a></span>
                                <span>|</span>
                                <span><a href="">注册</a></span>
                            </p>
                        </div>
                        </div>
                        <div class="btn">
                            <button>新人福利</button>
                            <button>PLUS会员</button>
                     </div>`
        $('.user').html(str4);
    }
}
// 更新登录状态
update();
// 点击退出登录
function signOut(target) {
    target.on('click', 'span', function () {
        localStorage.setItem('isLogin', false);
        update();
        location.href = './jd-login.html';
    })
}
signOut(loginBox);
signOut($('.quit'));
// 商品分类
// 初始化渲染
var selectStr = ``;
goodsData.forEach(function (obj) {
    selectStr += `<li>`
    obj.type.forEach(function (value) {
        selectStr += `<a href=""  >${value}</a><span>/</span>`
    })
    selectStr += `</li>`
})
$('.select>ul').html(selectStr);
$('.select>ul span:last-of-type').remove();

// 二级菜单渲染
function uodateMenu() {
    $('.select>ul li').mouseover(function () {
        $('.secondary-menu').css('display', 'block')
        let index = $(this).index();
        let secondaryStr = `<div class="title">`;
        goodsData[index].lists.title.forEach((val) => {
            secondaryStr += `<span>${val}<i>></i></span>`
        })
        secondaryStr += `</div><div class="option">`
        goodsData[index].lists.option.forEach((obj) => {
            secondaryStr += `<div class="optionName">${obj.optionName}<i>></i></div><ul class="optionLists">`
            obj.optionList.forEach((value) => {
                secondaryStr += `<li>${value}</li>`
            })
            secondaryStr += `</ul>`
        })
        secondaryStr += `</div>`;
        $('.secondary-menu').html(secondaryStr)
    })
    $('.main-box').mouseleave(function () {
        $('.secondary-menu').css('display', 'none')
    })
}
uodateMenu();